<template>
  <div>
    <div>
      <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="center">
      <div v-for="(item, index) in list" :key="index">
        <van-card
          :num="item.nums"
          :price="item.price"
          :title="item.name"
          :thumb="item.img"
        >
          <template #footer>
            <van-button size="mini" @click="jian(item.name)">-</van-button>
            <van-button size="mini" @click="add(item.name)">+</van-button>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { getcarlist, addnums, jiannums } from "../../../api/api";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

// 数据
let list = ref();

onMounted(() => {
  render();
});

// 渲染
const render = () => {
  getcarlist().then((res) => {
    list.value = res.data.data;
  });
};

// 点击+号执行的函数
const add = (name: string) => {
  addnums(name).then((res) => {
    if (res.data.code == 2) {
      render();
    }
  });
};

// 点击-号执行的函数
const jian = (name: string) => {
  jiannums(name).then((res) => {
    if (res.data.code == 2) {
      render();
    }
  });
};

// 返回
const onClickLeft = () => {
  router.push("/list");
};
</script>

<style scoped>
.van-card {
  margin-top: 10px;
}
.van-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.center {
  height: calc(100vh - 100px);
  overflow: auto;
}
</style>
